<template lang="html">

  <div class="ant-message" :style="{ top: top + 'px' }" v-el:content>
    <span>
      <notice
              v-for="notice in notices"
              :content="notice.content"
              :duration="notice.duration"
              :type="notice.type"
              :show.sync="notice.show"
      ><notice>
    </span>
  </div>

</template>

<script>

  import notice from './notice'

  let seed = 0

  export default {
    props: {
      top: ''
    },
    data: function() {
      return {
        notices: []
      }
    },
    computed: {},
    ready: function() {
    },
    attached: function() {
    },
    methods: {
      add(notice){
        const self = this
        const key = notice.key = notice.key || seed++
        const notices = this.notices

        if(!notices.filter(v => v.key === key).length) {
          let _notice = Object.assign({
            show: true,
            content: '',
            duration: 0.5,
          }, notice)
          this.notices = notices.concat(notice)
        }

      },
      remove (key) {
        this.notices.map(notice => {
          if(notice.key === key) {
            notice.show = false
          }
        })
      }
    },
    components: {
      notice
    }
  }
</script>

<style>
  .ant-message {
    font-size: 12px;
    position: fixed;
    z-index: 1010;
    width: 100%;
    top: 16px;
    left: 0
  }

  .ant-message-notice {
    width: auto;
    vertical-align: middle;
    position: absolute;
    left: 50%
  }

  .ant-message-notice-content {
    position: relative;
    right: 50%;
    padding: 8px 16px;
    border-radius: 3px;
    border: 1px solid #d9d9d9;
    box-shadow: 0 1px 8px hsla(0, 0%, 39%, .2);
    background: #fff;
    display: block
  }

  .ant-message-success {
    color: #16c294
  }

  .ant-message-error {
    color: #e95471
  }

  .ant-message-warning {
    color: #fa9e33
  }

  .ant-message-info, .ant-message-loading {
    color: #369be9
  }

  .ant-message .anticon {
    margin-right: 8px;
    font-size: 14px;
    top: 1px;
    position: relative
  }

  .message-transition {
    transition: all .3s ease
  }

  .message-enter, .message-leave {
    opacity: 0;
    transform: translateY(-50px)
  }
</style>